@import 'ant-design-vue/dist/antd.css';
@import "./variables";

//公共间隔样式
@each $attr,$val in $type {
    // 全部方向
    @each $multiType in $multiple {
        .#{$attr}#{$multiType}{
            #{$val}:$multiType * $base-instance
        }
    }

    // 上下左右
    @each $multiType in $multiple {
        .#{$attr}x#{$multiType}{
            #{$val}-top:$multiType * $base-instance;
            #{$val}-bottom:$multiType * $base-instance
        }
        .#{$attr}y#{$multiType}{
            #{$val}-left:$multiType * $base-instance;
            #{$val}-right:$multiType * $base-instance
        }
    }

    // 所有方向
    @each $multiType in $multiple {
        @each $dicattr,$dicval in $direction {
            .#{$attr}#{$dicattr}#{$multiType}{
                 #{$val}-#{$dicval}:$multiType * $base-instance;
            }
        }
    }
}

// 字体样式
@each $attr,$val in $font-Multiple {
    .f#{$attr}{
        font-size:$val * $base-font
    }
}

.baseColor{color: $base-color;}

// 自带样式修改
a{color: $base-color;}
ul,li{list-style: none;padding: 0;}
p{margin: 0;}
.flex{display: flex;flex-direction: row;justify-content: space-between;}




// ------------------------对于ui框架样式的修改

// 布局样式
.ant-layout{
    height: 100vh;
    .ant-layout-header{   //头部样式
        padding: 0px 30px;display: flex;justify-content: space-between;
        background-color: var(--cb-color-bg-primary,#fff);position: fixed;height: 60px;line-height: 60px;top: 0px;right: 0px;left: 0px; z-index: 999;box-shadow: 0 2px 4px 0 var(--cb-color-shadow,rgba(0,0,0,0.16));
        .logo{width: 300px;display:flex;align-items: center;justify-content: space-between;
            img{width: 40px;height: 40px;}
            h1{flex: 1;display: inline-block;margin: 0 0 0 15px;font-size: 18px;color: $base-color;font-family: Bold;}
        }
        .user_ope{
            display: flex;
            align-items: center;
            img{width: 40px;height: 40px;border-radius: 50%;margin-right: 8px;display: inline-block;}
        }
    }

    .ant-layout-sider{position:fixed;height: calc(100% - 40px);margin-top: 60px;box-shadow: 0 0 10px rgb(0 0 0 / 10%);}   //侧边栏样式
    .ant-layout-content{margin: 60px 0 0 200px;}  //主要内容样式
}

// 菜单样式
.ant-menu{   
    &-submenu{
        &-selected{color: $base-color;}
        &-active{color: $base-color;}
        &-title{
            &:hover{
                color: $base-color;
                .ant-menu-submenu-arrow::before,.ant-menu-submenu-arrow::after{background: linear-gradient(to right,$base-color,$base-color)!important;}
            }
        }
    } 
    &-item-selected{color: $base-color;}
    &-item-active{
        color: $base-color;
        &:hover{color: $base-color;}
    }
}

//表格样式
.ant-table{
    font-size:13px;
    &-thead tr th,&-tbody tr td{padding: 5px 16px;}
}

// 按钮样式
.ant-btn{
    background-color: $base-color;
    border-color: $base-color;
    color: #fff;
    &:hover,&:active,&:focus{background-color: $base-color;}
}

// 输入框或其他表单操作项目信息
.ant-input-number{width: 100%;}

// 卡片
.ant-card{box-shadow: rgb(0 0 0 / 10%) 0px 1px 4px 0px;}


// ------------------------自定义模块样式
// 筛选栏样式
.filterForm{
    border-radius: 5px;
    .ant-select,.ant-input-number{width: 192.5px;}
}

